<template>
  <div class="t-item" :style="{ background }" @click="toPage">
    <img :src="require(`@/static/image/${icon}`)" />
    <span>{{ title }}</span>
  </div>
</template>

<script>
import { toMiniProgram } from '../../../utils/utils'
export default {
  props: {
    background: {
      type: String,
      default: '#649CD6',
    },
    url: {
      type: String,
      default: '',
    },
    title: {
      type: String,
      default: '',
    },
    icon: {
      type: String,
      default: '',
    },
  },
  methods: {
    toPage() {
      if (this.url) {
        if (this.url.indexOf('@@') >= 0) {
          const [appid, path] = this.url.split('@@')
          toMiniProgram(appid, path)
        } else {
          this.$toPage(this.url)
        }
      } else {
        uni.showToast({
          title: '未配置链接',
          icon: 'none',
        })
      }
    },
  },
}
</script>
<style>
.t-item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 10px;
  border-radius: 8px;
  font-size: 15px;
  color: #ffffff;
  gap: 12px;
  img {
    width: 32px;
    height: 32px;
  }
}
</style>
